<div ng-controller="DeviceCtrl">
  <div ng-controller="AccountCtrl">

    <div class="alert alert-danger alert-inconsistent"
         ng-show="account.isInconsistent()" translate="account.common.account-inconsistent-warning">
      <strong>Warning!</strong> Account balance information is inconsistent.
    </div>

    <ng-include src="'views/account/nav.html'"></ng-include>

    <div class="tab-content">
      <div ng-if="account.transactions === null"
           class="text-center text-muted">
        <h4 translate="account.receive.waiting-for-transaction-history">Waiting for transaction history&hellip;</h4>
      </div>
      <div ng-controller="AccountReceiveCtrl"
           ng-if="account.transactions !== null"
           class="row">

        <div class="col-md-8">

          <button class="address-list-toggleused btn btn-sm btn-link pull-right"
                  ng-show="!usedAddresses.length && account.transactions.length"
                  ng-click="usedAddresses = account.usedAddresses()">
            <span class="glyphicon glyphicon-chevron-up"></span> {{ 'account.receive.show-used' | translate }}
          </button>

          <button class="address-list-toggleused btn btn-sm btn-link pull-right"
                  ng-show="usedAddresses.length && account.transactions.length"
                  ng-click="usedAddresses = []">
            <span class="glyphicon glyphicon-chevron-down"></span> {{ 'account.receive.hide-used' | translate }}
          </button>

          <h5 translate="account.receive.address">Address</h5>

          <!-- Used addresses -->
          <div class="list-group address-list address-list-used"
               ng-show="usedAddresses.length">
            <a class="list-group-item address-list-item"
               ng-repeat="address in usedAddresses"
               ng-class="{ active: activeAddress.address === address.address }"
               ng-click="activate(address)">
              <span class="address-list-index"
                    >/{{address.path[address.path.length-1]}}</span>
              <span class="address-list-address">{{address.address}}</span>
              <small class="address-list-balance text-success pull-right"
                >({{address.balance | amount}} {{account.coin.coin_shortcut}})</small>

              <!-- Address verification -->
              <span class="address-verify"
                    ng-if="
                    device.supports('addressVerification')
                    "
                    ng-class="{nonactive: (activeAddress.address !== address.address)}"
                    >
                <div ng-if="device.isConnected()"
                     ng-hide="address.verification">
                  <button class="btn btn-link btn-verifyaddress"
                          ng-click="verify(address)"
                          tooltip="{{ 'account.receive.verify.tooltip' | translate}}"
                          tooltip-placement="bottom"
                          tooltip-append-to-body="1"  
                        >
                    <span class="glyphicon glyphicon-eye-open"></span>
                  </button>
                </div>
                <div ng-if="!device.isConnected()"
                     tooltip="{{ 'account.receive.verify.tooltip.disabled' | translate}}"
                     tooltip-placement="bottom" tooltip-append-to-body="1">
                  <button class="btn btn-link btn-verifyaddress" disabled>
                    <span class="glyphicon glyphicon-eye-open"></span>
                  </button>
                </div>
              </span>
            </a>
            <hr>
          </div>

          <!-- Fresh addresses -->
          <div class="list-group address-list">
            <div ng-repeat="address in addresses">
              <a class="list-group-item address-list-item"
                 ng-class="{
                 invalid: address.invalid,
                 active: activeAddress.address === address.address
                 }"
                 ng-click="activate(address)">
                <span class="address-list-index"
                      >/{{address.path[address.path.length-1]}}</span>
                <span class="address-list-address"
                      >{{address.address}}</span>

                <!-- Address verification -->
                <span class="address-verify"
                      ng-if="
                      device.supports('addressVerification') 
                      "
                    ng-class="{nonactive: (activeAddress.address !== address.address)}"
                      >
                  <div ng-if="device.isConnected()"
                       ng-hide="address.verification">
                    <button class="btn btn-link btn-verifyaddress"
                            ng-click="verify(address)"
                            tooltip="{{ 'account.receive.verify.tooltip' | translate}}"
                            tooltip-placement="bottom"
                            tooltip-append-to-body="1"  
                            >
                      <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
                  </div>
                  <div ng-if="!device.isConnected()"
                       tooltip="{{ 'account.receive.verify.tooltip.disabled' | translate}}"
                       tooltip-placement="bottom" tooltip-append-to-body="1">
                    <button class="btn btn-link btn-verifyaddress" disabled>
                      <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
                  </div>
                </span>
              </a>

              <div class="line-divider"
                  ng-show="$first">
                <hr>
                <div class="line-divider-content text-center">
                  <button class="btn btn-xs btn-default"
                      ng-disabled="addresses.length >= lookAhead"
                      ng-click="more()">
                    {{ 'account.receive.more-please' | translate }}
                    <span class="glyphicon glyphicon-plus"></span>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div ng-show="addresses.length == lookAhead">
            <p class="text-danger" translate="account.receive.more-please-message">
              To access subsequent addresses, please use some of the
              listed addresses in a transaction.
            </p>
          </div>
        </div>

        <div class="col-md-4">
          <div>
            <h5 translate="account.receive.qr-code">QR Code</h5>

            <a class="address-qr-link"
               href="{{blockExplorer.urlAddress}}{{activeAddress.address}}"
               target="_blank" title="{{ 'account.receive.qr-code-link-title' | translate:blockExplorer }}">
              <qr size="210"
                  text="activeAddress.address"
                  correction-level="'M'"
                  type-number="0"
                  input-mode="'8bit'"></qr>
            </a>
          </div>

          <div ng-if="activeAddress">
            <h5 translate="account.receive.qr-code-details">Details</h5>

            <ul class="list-unstyled">
              <li ng-if="activeAddress.path">
                <span class="h6" translate="account.receive.qr-code-bip32-path">BIP32 Path:</span>
                <small class="text-monospace">{{ activeAddress.path | bip32Path }}</small>
              </li>
              <li ng-if="activeAddress.balance">
                <span class="h6" translate="account.receive.qr-code-balance">Balance:</span>
                <small class="text-success"
                  >{{ activeAddress.balance | amount }} {{account.coin.coin_shortcut}}</small>
              </li>
            </ul>
          </div>
        </div>

      </div>

      <!--
      <div>
      {{ account.publicKey() }}
      </div>
      -->

    </div>
  </div>
</div>
